<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学生管理</title>

<link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap-table.css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.js"></script>
<script	type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script	type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap-table.js"></script>
<script	type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/locale/bootstrap-table-zh-CN.js"></script>
<link href="${pageContext.request.contextPath}/static/toastr/toastr.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath}/static/toastr/toastr.min.js"></script>
</head>
<script type="text/javascript">
	var arr=[];
	$(function(){
		toastr.options.positionClass='toast-top-center';
		toastr.options.timeOut='1000';
		$("#table").bootstrapTable("refresh");
		list();
	})
	function list(){
		$.ajax({
			url:"${pageContext.request.contextPath}/QueryGrade",
			dataType:"json",
			type:"post",
			success:function(data){
				for(var i in data){
					$("[name='gid']").append("<option value='"+data[i].gradename+"'>"+data[i].gradename+"</option>");
					$("#cid").append("<option value='"+data[i].gradename+"'>"+data[i].gradename+"</option>");
				}	
			}
		})
		$("#table").bootstrapTable({
			url:"${pageContext.request.contextPath}/StudentManage",
			toolbar:"#toolbar",
			method:"post",
			dataType:"json",
			sidePagination:"server",
			pagination : true,//设置为 true 会在表格底部显示分页条
			paginationLoop : true,//设置为 true 启用分页条无限循环的功能。
			pageNumber:1,
			pageSize:3,
			pageList:[ 3, 6, 9],
			contentType:"application/x-www-form-urlencoded",
			queryParamsType : "",
			//请求服务器数据
			queryParams : queryParams,
			columns:[
				{
					checkbox:true
				},
				{
					field:"id",
					title:"编号",
					align:"center"
				},
				{
					field:"realName",
					title:"姓名",
					align:"center"
				},
				{
					field:"studentNum",
					title:"学号",
					align:"center"
				},
				{
					field:"gradeClass",
					title:"年班级",
					align:"center"
				},
				{
					field:"phone",
					title:"电话",
					align:"center"
				},
				{
					field:"address",
					title:"家庭地址",
					align:"center"
				},
				{
					field:"sex",
					title:"性别",
					align:"center"
				},{
					field:"age",
					title:"年龄",
					align:"center"
				}
			],
		onCheck:function(row){
			arr.push(row.studentNum);
		},
		onUncheck:function(row){
			//判断row.studentNum是否在arr数组中不在返回-1
			var local=$.inArray(row.studentNum,arr);
			if(local!=-1){
				arr.splice(local,1);//删除arr数组中的数据
			}
		}
		})
	}
		
		
		
	function queryParams(params){
		var likeName=$("#realname").val();
		var studentNum=$("#studentnum").val();
		var gradeName=$("#cid").val();
		var gradeClazz=$("[name='gradeClazz']").val();
		var param={
			pageNumber:params.pageNumber-1,
			pageSize:params.pageSize,
			likeName:likeName,
			studentNum:studentNum,
			gradeName:gradeName,
			gradeClazz:gradeClazz
		}
		return param;
	}
	function del(){
		alert(arr)
		if(arr==""){
			alert("请选中一行进行修改");
		}else{
		$.ajax({
			url:"${pageContext.request.contextPath}/DeleteStudentMessage",
			dataType:"json",
			type:"get",
			data:{
			 arr:arr
			},
			success:function(data){
				if(data){
					alert("删除成功");
					arr=[];
					$("#table").bootstrapTable("refresh");
				}
			}
		})
		}
	}
	function add(){
		var str=xy();
		if(str.indexOf("12345")!=-1){
			var gid=$("[name='gid']").val();
			var realname=$("[name='realname']").val();
			var cid=$("[name='cid']").val();
			var phone=$("[name='phone']").val();
			var address=$("[name='address']").val();
			var sex=$("[name='sex']").val();
			var age=$("[name='age']").val();
			 $.ajax({
				url:"${pageContext.request.contextPath}/InsertStudentMessage",
				dataType:"json",
				type:"get",
				data:{
					gid:gid,
					cid:cid,
					realname:realname,
					phone:phone,
					address:address,
					sex:sex,
					age:age
				},
				success:function(data){
					if(data){
						$("#insert").css("display","none"); 
						toastr.warning("添加成功");
					}else{
						atoastr.warning("添加失败");
					}
				}
			}) 
		}
		
		
	}
	function selectGrade(){
		$("#cid").change(function(){
			var gid1=$(this).val();
			if(gid1!=""){
				$.ajax({
					url:"${pageContext.request.contextPath}/QueryClass",
					dataType:"json",
					type:"post",
					data:{
						gid1:gid1
					},
					success:function(data){
						$("[name='gradeClazz']").html("<option value=''>请选择</option>");
						for(var i in data){
							$("[name='gradeClazz']").append("<option value='"+data[i].gradename+"'>"+data[i].gradename+"</option>");
						}	
					}
				})
			}else{
				$(this).val("请选择");
			}
		}) 
	}
	function tj(){
		$("[name='gid']").change(function(){
			var gid1=$(this).val();
			if(gid1!=""){
				$.ajax({
					url:"${pageContext.request.contextPath}/QueryClass",
					dataType:"json",
					type:"post",
					data:{
						gid1:gid1
					},
					success:function(data){
						$("[name='cid']").html("<option value=''>请选择</option>");
						for(var i in data){
							$("[name='cid']").append("<option value='"+data[i].gradename+"'>"+data[i].gradename+"</option>");
						}	
					}
				})
			}else{
				$(this).val("请选择");
			}
		}) 
	}
	function Upd(){
		var row=$("#table").bootstrapTable('getSelections');
		if(row[0]==null){
			alert("请选中一行进行修改");
		}else{
			var id=row[0].id;
		       var realname=row[0].realName;
		       var studentNum=row[0].studentNum;
		       var gradeClass=row[0].gradeClass;
		       var phone=row[0].phone;
		       var address=row[0].address;
		       var sex=row[0].sex;
		       var age=row[0].age;
		       $("[name='id1']").val(id);
		     $("[name='realname1']").val(realname);
		     $("[name='studentNum1']").val(studentNum);
		     $("[name='gradeClass1']").val(gradeClass);
		     $("[name='phone1']").val(phone);
		     $("[name='address1']").val(address);
		     $("[name='sex1']").val(sex);
		     $("[name='age1']").val(age);
		}
       
	}
	function upd(){
		var str=xy1();
		if(str.indexOf("123456")!=-1){
		  	var id= $("[name='id1']").val();
	       var realname= $("[name='realname1']").val();
	       var studentNum= $("[name='studentNum1']").val();
	       var gradeClass= $("[name='gradeClass1']").val();
	       var phone= $("[name='phone1']").val();
	       var address=$("[name='address1']").val();
	       var sex= $("[name='sex1']").val();
	       var age= $("[name='age1']").val();
	       $.ajax({
				url:"${pageContext.request.contextPath}/UpdateStudentMessage",
				dataType:"json",
				type:"post",
				data:{
					id:id,
					realname:realname,
					studentNum:studentNum,
					gradeClass:gradeClass,
					phone:phone,
					address:address,
					sex:sex,
					age:age
				},
				success:function(data){
					if(data){
						toastr.warning("修改成功");
						$("#table").bootstrapTable("refresh");
					}else{
						toastr.warning("修改失败");
					}
				}
			})
		}
	}
	function refresh(){
		var likeName=$("#realname").val();
		var studentNum=$("#studentnum").val();
		var gradeName=$("#cid").val();
		var gradeClazz=$("[name='gradeClazz']").val();
		  $.ajax({
				url:"${pageContext.request.contextPath}/StudentManage",
				dataType:"json",
				type:"post",
				data:{
					likeName:likeName,
					studentNum:studentNum,
					gradeName:gradeName,
					gradeClazz:gradeClazz
				},
				success:function(data){
					$("#table").bootstrapTable("refreshOptions",{pageNumber:1});
				}
			})
	}
	function xy(){
		var realname=$("[name='realname']").val();
		var gid=$("[name='gid']").val();
		var cid=$("[name='cid']").val();
		var address=$("[name='address']").val();
		var sex=$("[name='sex']").val();
		var age=$("[name='age']").val();
		var phone=$("[name='phone']").val();
		var nameRegnick=/^[\u4e00-\u9fa5]{0,}$/;
		var phoneRegnick=/^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|5|7|8][0-9]{9}))$/;
		var addressRegnick=/^[\u4e00-\u9fa5a-zA-Z0-9]+$/;
		var ageRegnick=/^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
		var str = "";
		var arrselections = $("#tb_departments").bootstrapTable('getSelections');
		toastr.options.positionClass = 'toast-top-right';
		if(realname==""){
			toastr.warning("姓名不能为空");
			$("[name='realname']").css("border-color","red");
		}else if(nameRegnick.test(realname)){
			$("[name='realname']").css("border-color","");
			str=str+"1";
		}else{
			toastr.warning("姓名不合法");
			$("[name='realname']").css("border-color","red");
		}
		if(gid=="" || cid==""){
			toastr.warning("请选择班级年级");
		}else{
			str=str+"2";
		}
		if(phone==""){
			toastr.warning("手机号不能为空");
			$("[name='phone']").css("border-color","red");
		}else if(phoneRegnick.test(phone)){
			$("[name='phone']").css("border-color","");
			str=str+"3";
		}else{
			toastr.warning("手机号不合法");
			$("[name='phone']").css("border-color","red");
		}
		if(address==""){
			toastr.warning("地址不能为空");
			$("[name='address']").css("border-color","red");
		}else if(addressRegnick.test(address)){
			$("[name='address']").css("border-color","");
			str=str+"4";
		}else{
			toastr.warning("地址不合法");
			$("[name='address']").css("border-color","red");
		}
		if(age==""){
			toastr.warning("年龄不能为空");
			$("[name='age']").css("border-color","red");
		}else if(ageRegnick.test(age)){
			$("[name='age']").css("border-color","");
			str=str+"5";
		}else{
			toastr.warning("年龄不合法");
			$("[name='age']").css("border-color","red");
		}
		return str;
	}
	function xy1(){
		var realname=$("[name='realname1']").val();
		var gid=$("[name='gradeClass1']").val();
		var cid=$("[name='cid1']").val();
		var address=$("[name='address1']").val();
		var sex=$("[name='sex1']").val();
		var age=$("[name='age1']").val();
		var phone=$("[name='phone1']").val();
		var nameRegnick=/^[\u4e00-\u9fa5]{0,}$/;
		var sexReg=/^[\u4e00-\u9fa5]{1}$/;
		var phoneRegnick=/^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|5|7|8][0-9]{9}))$/;
		var addressRegnick=/^[\u4e00-\u9fa5a-zA-Z0-9]+$/;
		var ageRegnick=/^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
		var str = "";
		var arrselections = $("#tb_departments").bootstrapTable('getSelections');
		toastr.options.positionClass = 'toast-top-right';
		if(realname==""){
			toastr.warning("姓名不能为空");
			$("[name='realname1']").css("border-color","red");
		}else if(nameRegnick.test(realname)){
			$("[name='realname1']").css("border-color","");
			str=str+"1";
		}else{
			toastr.warning("姓名不合法");
			$("[name='realname1']").css("border-color","red");
		}
		if(gid==""){
			toastr.warning("班级年级不能为空");
		}else{
			str=str+"2";
		}
		if(phone==""){
			toastr.warning("手机号不能为空");
			$("[name='phone1']").css("border-color","red");
		}else if(phoneRegnick.test(phone)){
			$("[name='phone1']").css("border-color","");
			str=str+"3";
		}else{
			toastr.warning("手机号不合法");
			$("[name='phone1']").css("border-color","red");
		}
		if(address==""){
			toastr.warning("地址不能为空");
			$("[name='address1']").css("border-color","red");
		}else if(addressRegnick.test(address)){
			$("[name='address1']").css("border-color","");
			str=str+"4";
		}else{
			toastr.warning("地址不合法");
			$("[name='address1']").css("border-color","red");
		}
		if(age==""){
			toastr.warning("年龄不能为空");
			$("[name='age1']").css("border-color","red");
		}else if(ageRegnick.test(age)){
			$("[name='age1']").css("border-color","");
			str=str+"5";
		}else{
			toastr.warning("年龄不合法");
			$("[name='age1']").css("border-color","red");
		}
		if(sex==""){
			toastr.warning("性别不能为空");
			$("[name='sex1']").css("border-color","red");
		}else if(sexReg.test(sex)){
			$("[name='sex1']").css("border-color","");
			str=str+"6";
		}else{
			toastr.warning("性别不合法");
			$("[name='sex1']").css("border-color","red");
		}
		return str;
	}
</script>
<style>
	#modalP{
		padding:10px;
		width:500px;
		height:55px;
		margin:0 auto;
		line-height:55px;
		font-size:15px;
	}
	#modalP1{
		padding:10px;
		width:500px;
		height:55px;
		margin:0 auto;
		line-height:55px;
		font-size:15px;
	}
	#modalP>input{
		width:300px;
		height:30px;
	}
	#modalP>select{
		width:300px;
		height:30px;
	}
	.modalSpan{
		display:inline-block;
		width:100px;
		height:30px;
		line-height:30px;
		text-align:right;
	}
	
</style>
<body>
<div class="col-sm-12 col-md-12">
		<div class="main-container">
		<div class="panel panel-default" style="margin: 0;padding: 0">
			<div class="panel-heading">搜索</div>
			<div class="panel-body">
				<form role="form" class="form-inline">
				<div class="form-group">学生姓名：</div>
					<input id="realname" type="text" class="form-control input-sm"
						placeholder=""> &nbsp;
					<div class="form-group">学生学号：</div>
					<input id="studentnum" type="text" class="form-control input-sm"
						placeholder=""> &nbsp;
					<div class="form-group">所在年级:</div>
					<select id="cid" class="form-control input-sm" onclick="selectGrade()">
						<option value="">-请选择-</option>
					</select>
					<div class="form-group">班级:</div>
					<select name="gradeClazz" class="form-control input-sm">
						<option value="">-请选择-</option>
					</select>
					<div class="form-group">
						<button class="btn btn-reset glyphicon glyphicon-search"
							type="button" onclick="reset()">清空</button>
					</div>
					<div class="form-group">
						<button class="btn btn-success glyphicon glyphicon-search"
							type="button" onclick="refresh()">搜索</button>
					</div>
				</form>
					</div>
		</div>
			<div id="toolbar">
				<button class="btn btn-primary btn-gt glyphicon glyphicon-plus-sign" data-toggle="modal"  data-target="#insert"  onclick="tj()" >添加</button>
				<button class="btn btn-info btn-gt glyphicon glyphicon glyphicon-circle-arrow-up" data-toggle="modal"  data-target="#update" onclick="Upd()">修改</button>
				<button class="btn btn-success btn-gt glyphicon glyphicon-asterisk" onclick="del()">删除</button>
				<button class="btn btn-success btn-gt glyphicon glyphicon glyphicon-share-alt" onclick="del()">导出</button>
			</div>
			<table id="table" ></table>
			<!-- 添加学生的模态框 -->
				<div class="modal fade" id="insert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title" id="myModalLabel">添加学生信息</h4>
			            </div>
			            <div class="modal-body">
			            	<p id="modalP">
			            		<span class="modalSpan">姓名:</span>
			            		<input type="text" name="realname" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">年级:</span>
			            		<select name="gid" >
			            			<option value="">请选择</option>
			            		</select>
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">班级:</span>
			            		<select name="cid" id="classSelect">
			            			<option value="">请选择</option>
			            		</select>
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">手机号:</span>
			            		<input type="text" name="phone" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">地址:</span>
			            		<input type="text" name="address" />
			            	</p>
			            	<p id="modalP1">
			            		<span class="modalSpan">性别:</span>
			            		<input type="radio" name="sex" id="sex" value="男" />男
			            		<input type="radio" name="sex" id="sex1" value="女" />女
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">年龄:</span>
			            		<input type="text" name="age" />
			            	</p>
			            </div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="add()">提交</button>
			            </div>
			        </div>
			    </div>
			</div>
				<!-- 修改学生的模态框 -->
				<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title" id="myModalLabel">修改学生信息</h4>
			            </div>
			            <div class="modal-body">
			            	<p id="modalP">
			            		<span class="modalSpan">编号:</span>
			            		<input type="text" name="id1" readonly='readonly' />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">姓名:</span>
			            		<input type="text" name="realname1" readonly='readonly' />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">年班级:</span>
			            		<input type="text" name="gradeClass1" readonly='readonly' />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">手机号:</span>
			            		<input type="text" name="phone1" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">地址:</span>
			            		<input type="text" name="address1" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">性别:</span>
			            		<input type="text" name="sex1" />
			            	</p>
			            	<p id="modalP">
			            		<span class="modalSpan">年龄:</span>
			            		<input type="text" name="age1" />
			            	</p>
			            </div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="upd()">提交</button>
			            </div>
			        </div>
			    </div>
			</div>
		</div>
	</div>
</body>
</html>